/*
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-14 08:47:45
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-09 16:23:33
 * @FilePath: \test\src\config\chartOption.js
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import "echarts-gl";
import * as echarts from "echarts";
import { nowSize } from "@/utils/tools.js";

//展示数据

let option1 = () => {
  let optionData = [];
  //扇形图颜色数据
  let colorList = [
    { color1: "rgba(68,108,221,1)", color2: "#42CEF7" },
    { color1: "#11B4C1", color2: "#3C5DC9" },
    { color1: "rgba(193,141,31,1)", color2: "#FFE71F" },
    { color1: "rgba(0,52,199,1)", color2: "#5498FF" },
    { color1: "rgba(190,164,75,0.9)", color2: "rgba(255,207,74,1)" },
    { color1: "rgba(165,123,98,0.9)", color2: "rgba(254,178,128,1)" },
    { color1: "rgba(105,123,186,0.9)", color2: "rgba(151,176,255,1)" },
    { color1: "rgba(106,102,173,0.9)", color2: "rgba(164,151,255,1)" },
    { color1: "rgba(106,76,178,0.9)", color2: "rgba(159,110,254,1)" },
    { color1: "rgba(134,109,188,0.9)", color2: "rgba(180,143,241,1)" },
    { color1: "rgba(54,122,194,0.9)", color2: "rgba(76,174,254,1)" },
    { color1: "rgba(97,145,197,0.9)", color2: "rgba(131,199,255,1)" },
  ];
  //请求的数据
  let resultData = [
    {
      name: "预备党员",
      value: 19,
    },
    {
      name: "发展党员",
      value: 23,
    },
    {
      name: "正式党员",
      value: 263,
    },
    {
      name: "积极分子",
      value: 223,
    },
    
  ];
  let sum = 0;
  resultData.forEach((item) => {
    sum += item.value;
  });
  resultData.forEach((item) => {
    optionData.push({
      value: item.value,
      name: item.name,
      labelLine: {
        show: true,
        lineStyle: {
          color: "rgba(26,240,239,1)",
        },
        length: nowSize(30),
        length2: nowSize(150),
      },
    });
    optionData.push({
      name: "",
      value: sum / 1000,
      itemStyle: { color: "transparent" },
      label: {
        show: false,
      },
    });
  });

  let option1 = {
    tooltip: {
      trigger: "item",
      formatter(params) {
        let res = "";
        const { marker, name, value } = params;
        if (name !== "") {
          res += `${marker}${name}:${value}人`;
        }
        return res;
      },
    },
    xAxis: {
      max: 10,
      show: false,
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      max: 10,
      show: false,
      splitLine: {
        show: false,
      },
    },
    series: [
      // {
      //   type: "scatter",
      //   zlevel: 30,
      //   itemStyle: {
      //     opacity: 1, // 控制 满意icon的 透明度
      //   },
      //   data: [
      //     {
      //       // 外圈 点状圈
      //       value: 5,
      //       symbol: "image://" + require("../assets/images/饼图外圈圆点.png"),
      //       symbolSize: 270,
      //       symbolOffset: [0, 0],
      //     },
      //   ],
      // },
      {
        type: "pie",
        // roseType: "radius",
        radius: ["0%", "60%"],
        center: ["50%", "50%"],
        startAngle:45,
        avoidLabelOverlap: false,
        label: {
          // 位置放在外面
          position: "outside",
          padding: [32, -30],
          lineHeight: 25,
          formatter: (val) => {
            //  return `{C|${val.data.name}}` + `{B|\n${val.data.value}家}\n{B|${val.percent}%}`
            return (
              `{percent|${val.data.value}}{b|人}` + `{name|\n${val.data.name}}`
            );
          },
          rich: {
            percent: {
              fontSize: nowSize(36),
              color: "#fff",
              fontWeight: 400,
              fontFamily: "Impact, Impact-Regular",
              verticalAlign: "bottom",
            },
            b: {
              fontSize: nowSize(28),
              color: "#fff",
              fontWeight: 400,
              fontFamily: "Impact, Impact-Regular",
              verticalAlign: "bottom",
            },
          },
          textStyle: {
            fontSize: nowSize(28),
            color: "#0be5ff",
          },
        },
        labelLayout: {
          verticalAlign: "bottom",
          dy: 55,
        },
        labelLine: {
          show: true,
        },
        itemStyle: {
          normal: {
            color(params) {
              return colorList[parseInt(params.dataIndex / 2)].color1;
            },
          },
        },
        z: 3,
        data: optionData,
      },
      {
        type: "pie",
        roseType: "radius",
        radius: ["0%", "62%"],
        center: ["50%", "50%"],
        startAngle:45,
        avoidLabelOverlap: false,
        label: {
          show: false,
        },

        itemStyle: {
          normal: {
            color(params) {
              return colorList[parseInt(params.dataIndex / 2)].color2;
            },
          },
        },
        z: 2,
        data: optionData,
      },
    ],
  };
  return option1;
};

let option2 = () => {
  function getParametricEquation(
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    height
  ) {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== "undefined" ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;

    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32,
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },

      x: function (u, v) {
        if (u < startRadian) {
          return (
            offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      y: function (u, v) {
        if (u < startRadian) {
          return (
            offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      },
    };
  }
  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
      typeof internalDiameterRatio !== "undefined"
        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
        : 1 / 3;

    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value;

      let seriesItem = {
        name:
          typeof pieData[i].name === "undefined"
            ? `series${i}`
            : pieData[i].name,
        type: "surface",
        parametric: true,
        wireframe: {
          show: false,
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k,
        },
      };

      if (typeof pieData[i].itemStyle != "undefined") {
        let itemStyle = {};

        typeof pieData[i].itemStyle.color != "undefined"
          ? (itemStyle.color = pieData[i].itemStyle.color)
          : null;
        typeof pieData[i].itemStyle.opacity != "undefined"
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;

        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
      );

      startValue = endValue;

      legendData.push(series[i].name);
    }
    return series;
  }
  // 传入数据生成 option
  const optionsData = [
    {
      name: "高中",
      value: 54,
      itemStyle: {
        //   opacity: 0.5,
        color: "#00ADEF",
      },
    },

    {
      name: "大专",
      value: 153,
      itemStyle: {
        //   opacity: 0.5,
        color: "#FF6969",
      },
    },
    {
      name: "本科",
      value: 145,
      itemStyle: {
        //   opacity: 0.5,
        color: "#9BD342",
      },
    },
    {
      name: "研究生",
      value: 10,
      itemStyle: {
        //   opacity: 0.5,
        color: "#FFDA00",
      },
    },
    {
      name: "其他",
      value: 93,
      itemStyle: {
        //   opacity: 0.5,
        color: "#AB4CD3",
      },
    },
  ];
  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
  series.push({
    name: "pie2d",
    type: "pie",
    label: {
      opacity: 1,
      // fontSize: 14,
      // lineHeight: 20,
      padding: [0, -9],
      formatter: function (params) {
        console.log(params,'hhhhhh');
        return `{a|${params.percent}}{b|%}\n{c|${params.data.name}}`;
      },
      rich: {
        a: {
          color: "#FFFFFF",
          fontFamily: "Impact, Impact-Regular",
          fontSize: nowSize(36),
          fontWeight: 400,
          textAlign: "left",
        },
        b: {
          color: "#FFFFFF",
          fontSize: nowSize(24),
        },
        c: {
          color: "#1AF0EF",
          fontSize: nowSize(24),
          textAlign: "left",
        },
      },
      textStyle: {
        fontSize: nowSize(28),
        color: "#fff",
      },
    },
    labelLine: {
      length: nowSize(28),
      length2: nowSize(40),
    },
    startAngle: -30, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["40%", "60%"],
    center: ["50%", "50%"],
    data: optionsData,
    itemStyle: {
      opacity: 0,
    },
  });
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    legend: {
      show: false,
      tooltip: {
        show: true,
      },
      orient: "vertical",
      data: ["猪", "鸡", "牛", "鸭"],
      top: "center",
      itemGap: 14,
      itemHeight: 8,
      itemWidth: 17,
      right: "2%",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    animation: true,
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${option.series[params.seriesIndex].pieData.value + "人"}`;
        }
      },
      textStyle: {
        fontSize: 14,
      },
    },
    title: {
      x: "center",
      top: "20",
      textStyle: {
        color: "#fff",
        fontSize: 22,
      },
    },
    labelLine: {
      show: true,
      lineStyle: {
        color: "#7BC0CB",
      },
      normal: {
        show: true,
        length: 10,
        length2: 10,
      },
    },
    label: {
      show: true,
      position: "outside",
      formatter: "{b} \n{d}%",
      textStyle: {
        color: "#fff",
        fontSize: "14px",
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.3,
      //top: '30%',
      bottom: "10%",
      // environment: "rgba(255,255,255,0)",
      viewControl: {
        distance: 180,
        alpha: 45,
        beta: 60,
        autoRotate: false, // 自动旋转
      },
    },
    series: series,
  };
  return option;
};

let option3 = () => {
  let option3 = {
    calculable: true,
    color: ["#04B3CC", "#3EE6E3", "#3BBCD9", "#01ABBC", "#038C99"],
    tooltip: {
      show: true,
      // formatter: function (params) {
      //   console.log(params,'lll');
      //   return `{a|${params.name}}`;
      // },
    },
    series: [
      {
        name: "漏斗图",
        type: "funnel",
        left: "0%",
        right: "55%",
        top: "10%",
        bottom: "10%",
        minSize: "0%",
        maxSize: "100%",
        sort: "descending",
        label: {
          show: true,
          formatter: function (params) {
            return `{a|${params.name}}`;
          },

          rich: {
            a: {
              color: "#FFFFFF",
              fontSize: nowSize(28),
            },
            b: {
              color: "rgba(101,166,196,1)",
              fontSize: 14,
            },
          },
        },
        labelLine: {
          length: 20,
          lineStyle: {
            width: 1,
            type: "solid",
          },
        },
        data: [
          { value: 34, name: "机关事业单位", num: "34" },
          { value: 13, name: "农村党员", num: "13" },
          { value: 59, name: "退休党员", num: "59" },
          { value: 93, name: "非共有经济组织党员", num: "93" },
          { value: 83, name: "其他", num: "83" },
        ],
      },
    ],
  };
  return option3;
};

let option5 = () => {
  var value = "5801";
  var subtext = `常驻人口`;
  var max = 8000;
  let option = {
    title: {
      show: true,
      text: value || "仪表盘",
      subtext,
      textAlign: "center",
      subtextStyle: {
        align: "center",
        fontSize: nowSize(28),
        left: 18,
        color: "#FFFFFF",
      },
      left: nowSize(220),
      bottom: nowSize(110),
      textStyle: {
        color: "#20FBF4",
        fontSize: nowSize(48),
        align: "center",
        textAlign: "center",
        fontFamily: '"Impact, Impact-Regular"',
      },
    },
    angleAxis: {
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      min: 0,
      max: max,
      // boundaryGap: ['0', '10'],
      startAngle: 225,
    },
    radiusAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: ["a", "b", "c"],
      z: 10,
    },
    polar: {
      radius: "105%",
    },
    series: [
      // 粉色圆
      {
        type: "bar",
        data: [, , value],
        z: 1,
        coordinateSystem: "polar",
        barMaxWidth: 10.2,
        name: "警告事件",
        roundCap: true,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#1EEBE6",
          },
          {
            offset: 1,
            color: "#1EEBE6",
          },
        ]),
        barGap: "-100%",
      },
      // 灰色的圆
      {
        type: "bar",
        data: [0, 0, max],
        z: 0,
        silent: true,
        coordinateSystem: "polar",
        barMaxWidth: 10.2,
        name: "C",
        roundCap: true,
        color: "#F1F3F5",
        barGap: "-100%",
      },
      // 里面刻度
      {
        type: "gauge",
        radius: "75%",
        splitNumber: 4,
        max: max,

        detail: {
          show: false,
        },
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 0,
            opacity: 0, //刻度背景宽度
          },
        },
        splitLine: {
          show: false,
          length: 22, //长刻度节点线长度
        },
        axisTick: {
          show: true,
          lineStyle: {
            width: 4,
            color: "#074D5A",
          },
          length: 4,
          splitNumber: 6,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
    tooltip: {
      show: false,
    },
  };
  return option;
};

let option6 = () => {
  var value = "1695";
  var subtext = `流动人口`;
  var max = 2331;
  let option = {
    title: {
      show: true,
      text: value || "仪表盘",
      subtext,
      textAlign: "center",
      subtextStyle: {
        align: "center",
        fontSize: nowSize(28),
        left: 18,
        color: "#FFFFFF",
      },
      left: nowSize(220),
      bottom: nowSize(110),
      textStyle: {
        color: "#20FBF4",
        fontSize: nowSize(48),
        align: "center",
        textAlign: "center",
        fontFamily: '"Impact, Impact-Regular"',
      },
    },
    angleAxis: {
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      min: 0,
      max: max,
      // boundaryGap: ['0', '10'],
      startAngle: 225,
    },
    radiusAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: ["a", "b", "c"],
      z: 10,
    },
    polar: {
      radius: "105%",
    },
    series: [
      //   {
      //     name: '车辆总数',
      //     type: 'gauge',
      //     z: 1,
      //     min: 0,
      //     max: 100,
      //     splitNumber: 10,
      //     radius: '90%',
      //     axisLine: {            // 坐标轴线
      //       lineStyle: {       // 属性lineStyle控制线条样式
      //             width: 2,
      //             color: [
      //                 [1, '#0090FF']
      //             ],
      //             opacity: 0.5
      //         }
      //     },
      //     axisTick: {
      //         show:false
      //     },
      //     axisLabel:{
      //        show:false,
      //     },
      //     splitLine: { // 分隔线
      //         show:false,
      //         length: 15,
      //     },
      //     detail: {
      //         show: false,
      //     },
      //     data: []
      // },
      // 粉色圆
      {
        type: "bar",
        data: [, , value],
        z: 1,
        coordinateSystem: "polar",
        barMaxWidth: 10.2,
        name: "警告事件",
        roundCap: true,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#FBB020",
          },
          {
            offset: 1,
            color: "#FBB020",
          },
        ]),
        barGap: "-100%",
      },
      // 灰色的圆
      {
        type: "bar",
        data: [0, 0, max],
        z: 0,
        silent: true,
        coordinateSystem: "polar",
        barMaxWidth: 10.2,
        name: "C",
        roundCap: true,
        color: "#F1F3F5",
        barGap: "-100%",
      },
      // 里面刻度
      {
        type: "gauge",
        radius: "75%",
        splitNumber: 4,
        max: max,

        detail: {
          show: false,
        },
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 0,
            opacity: 0, //刻度背景宽度
          },
        },
        splitLine: {
          show: false,
          length: 22, //长刻度节点线长度
        },
        axisTick: {
          show: true,
          lineStyle: {
            width: 4,
            color: "#074D5A",
          },
          length: 4,
          splitNumber: 6,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
    tooltip: {
      show: false,
    },
  };
  return option;
};

let option7 = () => {
  const sxnja = [
    93.67, 93.44, 94.34, 94.5, 97.82, 95.09, 95.79, 97.49, 93.72, 93.52, 97.78,
    91.14, 92.13, 95.45,
  ];

  const offsetX = 10;
  const offsetY = 5;
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });

  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
      const c4 = [shape.x + offsetX, shape.y - offsetY];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });

  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
      const c3 = [shape.x, shape.y - offsetX];
      const c4 = [shape.x - offsetX, shape.y - offsetY];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });

  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);

  let option = {
    tooltip: {},
    title: {
      text: "人数",
      top: "-3%",
      left: "3%",
      textStyle: {
        fontSize: "12px",
        fontWeight: 300,
        color: "#ffffff",
        opacity: 1,
      },
    },
    xAxis: {
      type: "category",
      data: ["汉族", "满族", "蒙古族", "锡伯族", "维吾尔族"],
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#B5C5D4",
        fontSize: "10px",
        interval: 0,
      },
    },
    yAxis: {
      type: "value",
      min: 80,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#B2C2D3",
          opacity: 0.3,
          type: "dotted",
        },
      },
      axisLabel: {
        color: "#ffffff",
        fontSize: "12px",
      },
    },
    grid: {
      left: "7%",
      right: 0,
      top: "15%",
      bottom: "20%",
      zlevel: -1,
      z: -1,
    },
    series: [
      {
        name: "平均办案天数",
        type: "custom",
        tooltip: {
          valueFormatter: function (value) {
            return value + "天";
          },
        },
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 80]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "rgba(5,101,113,0.1)",
                    },
                    {
                      offset: 0,
                      color: "rgba(0,197,223,1)",
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ]),
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 80]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "rgba(6,111,122,0.2)",
                    },
                    {
                      offset: 0,
                      color: "rgba(0,197,223,1)",
                    },
                  ]),
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 80]),
                },
                style: {
                  fill: "rgba(32,251,244,1)",
                },
              },
            ],
          };
        },
        data: sxnja,
      },
    ],
  };
  return option;
};

let option8 = () => {
  let color1 = {
    type: "linear",
    colorStops: [
      {
        offset: 0,
        color: "rgba(2,206,214,0.8)",
      },
      {
        offset: 0.5,
        color: "rgba(44,162,163,0.5)",
      },
      {
        offset: 1,
        color: "rgba(25,217,170,0.8)",
      },
    ],
  };
  let color2 = {
    type: "linear",
    colorStops: [
      {
        offset: 0,
        color: "rgba(67,209,255,1)",
      },
      {
        offset: 1,
        color: "rgba(46,226,148,1)",
      },
    ],
  };
  let color3 = {
    type: "radial",
    colorStops: [
      {
        offset: 0,
        color: "rgba(17,47,75,.7)",
      },
      {
        offset: 1,
        color: "rgba(51,205,207,.7)",
      },
    ],
  };
  let xData = ["6月", "7月", "8月", "9月", "10月", "11月", "12月"];
  let yData = [1, 2, 3, 4, 5, 6, 7];
  let option = {
    title: {
      show: true,
      text: "课程展开情况",
      right: "4%",
      top: "0%",
      textStyle: {
        fontSize: nowSize(30),
        color: "#FFFFFF",
      },
    },
    grid: {
      top: "25%",
      left: "5%",
      bottom: "5%",
      right: "5%",
      containLabel: true,
    },
    tooltip: {
      show: true,
    },
    animation: false,
    xAxis: [
      {
        type: "category",
        data: xData,
        splitLine: {
          show: true, //让网格显示
          lineStyle: {
            //网格样式
            color: ["#183B4B"], //网格的颜色
            width: 1, //网格的宽度
            type: "solid", //网格是实实线，可以修改成虚线以及其他的类型
          },
        },
        axisTick: {
          alignWithLabel: true,
        },
        show: true, //是否显示
        lineStyle: {
          //网格线样式
          color: "#0735a2", //网格线颜色
          width: 1, //网格线的加粗程度
          type: "dashed", //网格线类型
        },
        nameTextStyle: {
          color: "#82b0ec",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#183B4B",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        show: true,
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#DDDFE1",
            fontSize: nowSize(28),
          },
        },
        splitLine: {
          show: true, //让网格显示
          lineStyle: {
            //网格样式
            color: ["#183B4B"], //网格的颜色
            width: 1, //网格的宽度
            type: "solid", //网格是实实线，可以修改成虚线以及其他的类型
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        //蓝色柱子
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: color1,
          },
        },
        symbol: "rect",
        symbolClip: true,
        symbolSize: [nowSize(35), "100%"],
        symbolOffset: [0, -0],
        symbolPosition: "start",
        z: 5,
        animation: false,
        data: yData,
      },
      {
        //蓝色柱子顶部椭圆
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: color2,
          },
        },
        symbolSize: [nowSize(35), nowSize(12)],
        symbolOffset: [0, -5],
        symbolPosition: "end",
        z: 6,
        animation: false,
        data: yData,
      },
    ],
  };
  return option;
};

let option9 = () => {
  let bgColor = "#fff";
  let title = "课程类型";
  let color = [
    "#FFA5A5",
    "#AFC5FB",
    "#F587C4",
    "#86F2A6",
    "#FADD66",
    "#CD87F5",
    "#FACD89",
    "#6BAAFF",
    "#61EBD9",
    "#DDFF80",
  ];
  let echartData = [
    {
      name: "器乐",
      value: "3720",
    },
    {
      name: "安全教育",
      value: "2920",
    },
    {
      name: "科普教育",
      value: "2200",
    },
    {
      name: "体育健身",
      value: "1420",
    },
    {
      name: "形体训练",
      value: "1420",
    },
    {
      name: "手工艺",
      value: "1420",
    },
    {
      name: "绘画",
      value: "1420",
    },
    {
      name: "声乐",
      value: "1420",
    },
    {
      name: "语言",
      value: "1420",
    },
    {
      name: "书法",
      value: "1420",
    },
  ];

  let formatNumber = function (num) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ",");
  };
  let total = echartData.reduce((a, b) => {
    return a + b.value * 1;
  }, 0);

  let option = {
    color: color,
    // tooltip: {
    //     trigger: 'item'
    // },
    title: [
      {
        text: `{val| ${echartData.length}}{name2|种}\n{name|${title}}`,
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: nowSize(28),
              fontWeight: "normal",
              color: "#FFFFFF",
            },
            name2: {
              fontSize: nowSize(26),
              fontWeight: "normal",
              color: "#FFFFFF",
              // padding: [10, 0],
            },
            val: {
              fontSize: nowSize(50),
              fontWeight: "800",
              color: "#FFFFFF",
            },
          },
        },
      },
      {
        show: false,
        text: "单位：个",
        top: 20,
        left: 20,
        textStyle: {
          fontSize: 14,
          color: "#666666",
          fontWeight: 400,
        },
      },
    ],
    // legend: {
    //     orient: 'vertical',
    //     icon: 'rect',
    //     x: '80%',
    //     y: 'center',
    //     itemWidth: 12,
    //     itemHeight: 12,
    //     align: 'left',
    //     textStyle: {
    //         rich: {
    //             name: {
    //                 fontSize: 12
    //             },
    //             value: {
    //                 fontSize: 16,
    //                 padding: [0, 5, 0, 15]
    //             },
    //             unit: {
    //                 fontSize: 12
    //             }
    //         }
    //     },
    //     formatter: function(name) {
    //         let res = echartData.filter(v => v.name === name);
    //         res = res[0] || {};
    //         let unit = res.unit || '';
    //         return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
    //     }
    //     // data: legendName
    // },
    series: [
      {
        type: "pie",
        radius: ["45%", "60%"],
        center: ["50%", "50%"],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            // borderColor: bgColor,
            borderWidth: 2,
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: nowSize(90),
            lineStyle: {
              color: "#3A6271",
            },
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return "{name|" + params.name + "}";
            },
            padding: [0, 0, 0, -70],
            rich: {
              icon: {
                fontSize: 16,
              },
              name: {
                fontSize: nowSize(28),
                padding: [0, 0, 0, 70],
                color: "#FFFFFF",
              },
              value: {
                fontSize: 18,
                fontWeight: "bold",
                color: "#333333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};

let option10 = () => {
  const color = ["#005aff", "#f8b551"];
  let optionData = [
    {
      name: "启用电梯",
      value: 176,
    },
    {
      name: "停用电梯",
      value: 288,
    },
  ];
  let option;
  return option;
};

let option11 = () => {
  let bgColor = "#fff";
  let color = [
    "#FFB302",
    "#20FBF4",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69",
  ];
  let echartData = [
    {
      name: "1",
      // 新生儿
      value1: 5,
      // 老人
      value2: 25,
    },
    {
      name: "2",
      value1: 7,
      value2: 27,
    },
    {
      name: "3",
      value1: 3,
      value2: 25,
    },
    {
      name: "4",
      value1: 6,
      value2: 21,
    },
    {
      name: "5",
      value1: 4,
      value2: 27,
    },
    {
      name: "6",
      value1: 7,
      value2: 23,
    },
    {
      name: "7",
      value1: 9,
      value2: 22,
    },
    {
      name: "8",
      value1: 7,
      value2: 28,
    },
  ];

  let xAxisData = echartData.map((v) => v.name);
  //  ["1", "2", "3", "4", "5", "6", "7", "8"]
  let yAxisData1 = echartData.map((v) => v.value1);
  // [100, 138, 350, 173, 180, 150, 180, 230]
  let yAxisData2 = echartData.map((v) => v.value2);
  // [233, 233, 200, 180, 199, 233, 210, 180]
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  };

  let option = {
    color: color,
    legend: {
      right: 10,
      top: 10,
      icon: "roundRect",
      // itemGap: 30,
      formatter: function (name) {
        let count = 0;
        //通过name获取到数组对象中的单个对象
        console.log(option, "option");
        let singleData = option.series.filter(function (item) {
          return item.name == name;
        });
        singleData[0].data.forEach((el) => {
          count += el;
        });

        return `{a|${name}} {x|${count}}{a|人}`;
      },
      textStyle: {
        //rich放在textStyle里面
        rich: {
          a: {
            color: "#ffffff",
            // lineHeight: 18,
            verticalAlign: "bottom",
            fontSize:nowSize(24)
          },
          x: {
            // marginLeft: "10px",
            color: "#1EF1EB",
            fontSize: nowSize(36),
            fontFamily: "Impact, Impact-Regular",
            borderColor: "#449933",
            borderRadius: 4,
          },
        },
      },
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let html = "";
        params.forEach((v) => {
          html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                人`;
        });

        return html;
      },
      extraCssText:
        "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: "#ffffff",
          shadowColor: "rgba(225,225,225,1)",
          shadowBlur: 5,
        },
      },
    },
    grid: {
      top: 70,
      left: 0,
      right: 10,
      bottom: 0,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: "{value}月",
          textStyle: {
            color: "#ffffff",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#3E809A",
          },
        },
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "单位：万千瓦时",
        axisLabel: {
          textStyle: {
            color: "#ffffff",
          },
        },
        nameTextStyle: {
          color: "#666",
          fontSize: 12,
          lineHeight: 40,
        },
        splitLine: {
          lineStyle: {
            type: "solid",
            color: ["#183B4B"],
            width: 1,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3E809A",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "新生儿",
        type: "line",
        smooth: true,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData1,
      },
      {
        name: "重点看护老人",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[1],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 8,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[1], 0.3),
                },
                {
                  offset: 1,
                  color: hexToRgba(color[1], 0.1),
                },
              ],
              false
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10,
          },
        },
        data: yAxisData2,
      },
    ],
  };
  return option;
};

let option4 = () => {
  let option = {
    // backgroundColor: '#00265f',
    title: {
      text: "",
      x: "center",
      y: "4%",
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    legend: {
      style: "plain",
      data: ["年龄"],
      top: "6%",
      right: "1%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: nowSize(28),
        color: "#ffffff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "25%",
      right: "0%",
      left: "13%",
      bottom: "35.5",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "<30岁",
          "31-35岁",
          "36-40岁",
          "41-45岁",
          "46-50岁",
          "51-55岁",
          "55-60岁",
          ">60岁",
        ],
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#e2e9ff",
          textStyle: {
            fontSize: nowSize(28),
          },
        },
      },
    ],
    yAxis: [
      {
        name: "人数",
        nameTextStyle: {
          align: "right",
          fontSize: nowSize(24),
        },
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          textStyle: {
            fontSize: nowSize(24),
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,1)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
    ],
    series: [
      {
        name: "年龄",
        type: "bar",
        data: [37, 33, 27, 25, 23, 22, 23, 92],
        barWidth: "7px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#01ffd2", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#03263c", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
      },
    ],
  };
  return option;
};
let option12 = () => {
  let option = {
    // backgroundColor: '#00265f',
    title: {
      text: "",
      x: "center",
      y: "4%",
      textStyle: {
        color: "#fff",
        fontSize: "22",
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    legend: {
      style: "plain",
      data: ["党龄"],
      top: "6%",
      right: "1%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: nowSize(28),
        color: "#ffffff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "25%",
      right: "10%",
      left: "13%",
      bottom: "35.5",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "<1年",
          "1-5年",
          "6-10年",
          "11-15年",
          "16-20年",
          "21-25年",
          "26-30年",
          ">30年",
        ],
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#e2e9ff",
          textStyle: {
            fontSize: nowSize(28),
          },
        },
      },
    ],
    yAxis: [
      {
        name: "人数",
        nameTextStyle: {
          align: "right",
          fontSize: nowSize(24),
        },
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          textStyle: {
            fontSize: nowSize(24),
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,1)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
    ],
    series: [
      {
        name: "党龄",
        type: "bar",
        data: [37, 76, 52, 34, 24, 27, 24, 8],
        barWidth: "7px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#01a8ff", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#03263c", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
      },
    ],
  };
  return option;
};
let option13 = () => {
  function getParametricEquation(
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    height
  ) {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== "undefined" ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;

    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32,
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },

      x: function (u, v) {
        if (u < startRadian) {
          return (
            offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      y: function (u, v) {
        if (u < startRadian) {
          return (
            offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      },
    };
  }
  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
      typeof internalDiameterRatio !== "undefined"
        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
        : 1 / 3;

    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value;

      let seriesItem = {
        name:
          typeof pieData[i].name === "undefined"
            ? `series${i}`
            : pieData[i].name,
        type: "surface",
        parametric: true,
        wireframe: {
          show: false,
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k,
        },
      };

      if (typeof pieData[i].itemStyle != "undefined") {
        let itemStyle = {};

        typeof pieData[i].itemStyle.color != "undefined"
          ? (itemStyle.color = pieData[i].itemStyle.color)
          : null;
        typeof pieData[i].itemStyle.opacity != "undefined"
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;

        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      console.log(series[i]);
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
      );

      startValue = endValue;

      legendData.push(series[i].name);
    }
    return series;
  }
  // 传入数据生成 option
  const optionsData = [
    {
      name: "男",
      value: 280,
      itemStyle: {
        //   opacity: 0.5,
        color: "#00ADEF",
      },
    },

    {
      name: "女",
      value: 175,
      itemStyle: {
        //   opacity: 0.5,
        color: "#FF6969",
      },
    },
  ];
  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
  series.push({
    name: "pie2d",
    type: "pie",
    label: {
      opacity: 1,
      // fontSize: 14,
      // lineHeight: 20,
      formatter: function (params) {
        return `{a|${params.percent}}{b|%}\n{c|${params.data.name}}`;
      },
      rich: {
        a: {
          color: "#FFFFFF",
          fontFamily: "Impact, Impact-Regular",
          fontSize: nowSize(36),
          fontWeight: 400,
          textAlign: "left",
        },
        b: {
          color: "#FFFFFF",
          fontSize: nowSize(24),
        },
        c: {
          color: "#1AF0EF",
          fontSize: nowSize(24),
          textAlign: "left",
        },
      },
      textStyle: {
        fontSize: nowSize(28),
        color: "#fff",
      },
    },
    labelLine: {
      length: nowSize(10),
      length2: 30,
    },
    startAngle: -30, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["40%", "60%"],
    center: ["50%", "50%"],
    data: optionsData,
    itemStyle: {
      opacity: 0,
    },
  });
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    legend: {
      show: false,
      tooltip: {
        show: true,
      },
      orient: "vertical",
      data: ["猪", "鸡", "牛", "鸭"],
      top: "center",
      itemGap: 14,
      itemHeight: 8,
      itemWidth: 17,
      right: "2%",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    animation: true,
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${option.series[params.seriesIndex].pieData.value + "人"}`;
        }
      },
      textStyle: {
        fontSize: 14,
      },
    },
    title: {
      x: "center",
      top: "20",
      textStyle: {
        color: "#fff",
        fontSize: 22,
      },
    },
    labelLine: {
      show: true,
      lineStyle: {
        color: "#7BC0CB",
      },
      normal: {
        show: true,
        length: 10,
        length2: 10,
      },
    },
    label: {
      show: true,
      position: "outside",
      formatter: "{b} \n{d}%",
      textStyle: {
        color: "#fff",
        fontSize: "14px",
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.04,
      //top: '30%',
      bottom: "50%",
      // environment: "rgba(255,255,255,0)",
      viewControl: {
        distance: 180,
        alpha: 45,
        beta: 60,
        autoRotate: false, // 自动旋转
      },
    },
    series: series,
  };
  return option;
};
// 导出
export default {
  option1,
  option2,
  option3,
  option4,
  option5,
  option6,
  option7,
  option8,
  option9,
  option10,
  option11,
  option12,
  option13,
};
